<template>
  <div :class="mode ? 'data-list-co' : 'data-list'" class="panel-list">
    <!-- <div class="data-list panel-list"> -->
    <!--  header and 加载数据  -->
    <div class="header">
      <div class="header-title">
        <span class="type-icon-name">
          <a-icon-font type="iconwodeshujubeifen" />
          <span class="data-operator">数据集</span>
        </span>
        <!-- 加载数据 新用户引导 step-8  -->
        <guide-step-popover :guide-step="8">
          <template #header>
            <span
              v-if="!mode"
              class="load-project-data"
              @click="LoadData(true)"
            >
              <a-icon type="plus" />
              <span>加载数据</span>
            </span>
          </template>
        </guide-step-popover>
      </div>
    </div>

    <!-- search box -->
    <div class="search-box-cont">
      <a-input
        v-model="keyword2"
        placeholder="搜索..."
        allow-clear
        class="search-input"
      />
    </div>
    <ul class="groups scroll-bar">
      <li
        v-for="(group, index) in searchMode2 ? searchResult : projectData"
        :key="index"
        :class="{ expanded: group.collapsed }"
      >
        <!-- 数据文件夹头 -->
        <div class="header">
          <div
            class="label"
            style="width: 100%;"
            @click="toggleGroupStatus(group)"
          >
            <a-icon
              class="collapsible-icon"
              :type="collapsedList.includes(group.userName) ? 'down' : 'right'"
            />
            <a-icon-font
              class="folder-icon"
              :type="
                collapsedList.includes(group.userName)
                  ? 'iconwenjianjiazhankai'
                  : 'iconwenjianjiashouqi'
              "
            ></a-icon-font>
            <a-tooltip
              placement="topLeft"
              :mouse-enter-delay="0.5"
              :overlay-style="{ 'max-width': '250px' }"
            >
              <template slot="title">
                <span>{{ group.userName + '的数据' }}</span>
              </template>
              <span class="data-title">{{ group.userName + '的数据' }}</span>
            </a-tooltip>
            <a-tooltip
              v-if="projectData.length >= 1"
              placement="topLeft"
              :mouse-enter-delay="0.5"
              :overlay-style="{ 'max-width': '250px' }"
            >
              <template slot="title">
                您贡献的数据若被项目其他成员使用，无论您是否在此项目中，此数据都将在项目中存在，请谨慎上传
              </template>
              <a-icon
                v-if="group.userName === '我'"
                type="exclamation-circle"
                theme="filled"
                style="color: #faad14; margin-left: 20px;"
              ></a-icon>
            </a-tooltip>
          </div>
        </div>
        <ul v-if="collapsedList.includes(group.userName)" class="items">
          <li
            v-for="(datasource, index2) in group.dataset"
            :key="index2"
            :class="{
              'menu-open': dbGroupIndex === index && dbItemIndex === index2,
            }"
            @click="clickOperatorItem($event)"
          >
            <!-- 第一个数据分组 && 第一个数据 展示用户引导 step-9 -->
            <guide-step-popover
              v-if="index2 === 0 && index === 0"
              :guide-step="9"
            >
              <template #header>
                <div class="header">
                  <div
                    class="label"
                    :style="{ width: 'calc(100% - 20px)' }"
                    @mousedown="startDragging($event, datasource)"
                  >
                    <a-icon-font
                      class="item-icon"
                      type="iconxitongshujubeifen3"
                    />
                    <a-tooltip
                      placement="topLeft"
                      :mouse-enter-delay="0.5"
                      :overlay-style="{ 'max-width': '250px' }"
                    >
                      <template slot="title">
                        <span>{{
                          `${datasource.name}(${datasource.categoryName})`
                        }}</span>
                      </template>
                      <span class="label-text">{{ `${datasource.name}` }}</span>
                    </a-tooltip>
                  </div>
                  <a-dropdown
                    :placement="'bottomCenter'"
                    :trigger="['click']"
                    @visibleChange="visibleChange(index, index2)"
                  >
                    <a-icon type="ellipsis" class="header-btn" />
                    <a-menu slot="overlay">
                      <a-menu-item key="1">
                        <span
                          class="item menu-item-btn"
                          @click="checkDataInfo(datasource)"
                          >数据详情</span
                        >
                      </a-menu-item>
                      <a-menu-item key="2">
                        <span
                          class="item menu-item-btn"
                          @click="locateData(datasource)"
                          >定位</span
                        >
                      </a-menu-item>
                      <a-menu-item
                        v-if="!mode && group.userName === '我'"
                        key="3"
                      >
                        <span
                          class="item menu-item-btn"
                          @click="openDeleteData(datasource)"
                          >删除</span
                        >
                      </a-menu-item>
                    </a-menu>
                  </a-dropdown>
                </div>
              </template>
            </guide-step-popover>
            <!-- 除第一个数据之外的数据 -->
            <div v-else class="header">
              <div
                class="label"
                :style="{ width: 'calc(100% - 20px)' }"
                @mousedown="startDragging($event, datasource)"
              >
                <a-icon-font class="item-icon" type="iconxitongshujubeifen3" />
                <a-tooltip
                  placement="topLeft"
                  :mouse-enter-delay="0.5"
                  :overlay-style="{ 'max-width': '250px' }"
                >
                  <template slot="title">
                    <span>{{
                      `${datasource.name}(${datasource.categoryName})`
                    }}</span>
                  </template>
                  <span class="label-text">{{ `${datasource.name}` }}</span>
                </a-tooltip>
              </div>
              <a-dropdown
                :placement="'bottomCenter'"
                :trigger="['click']"
                @visibleChange="visibleChange(index, index2)"
              >
                <a-icon type="ellipsis" class="header-btn" />
                <a-menu slot="overlay">
                  <a-menu-item key="1">
                    <span
                      class="item menu-item-btn"
                      @click="checkDataInfo(datasource)"
                      >数据详情</span
                    >
                  </a-menu-item>
                  <a-menu-item key="2">
                    <span
                      class="item menu-item-btn"
                      @click="locateData(datasource)"
                      >定位</span
                    >
                  </a-menu-item>
                  <a-menu-item v-if="!mode && group.userName === '我'" key="3">
                    <span
                      class="item menu-item-btn"
                      @click="openDeleteData(datasource)"
                      >删除</span
                    >
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </div>
          </li>
        </ul>
      </li>
    </ul>
    <div
      v-if="searchMode2 && searchResult.length < 1"
      class="no-result"
      style="margin-top: -25px;"
    >
      未找到数据源
    </div>

    <!-- 提示框 -->
    <a-modal
      :visible="warningVisible"
      :ok-text="warningTitle.indexOf('替换') !== '-1' ? '替换' : '恢复'"
      cancel-text="取消"
      centered
      :width="458"
      @cancel.stop="warningVisible = false"
    >
      <div class="warning-modal">
        <a-icon-font class="icon" type="iconweiwanpeizhi"></a-icon-font>
        <strong>{{ warningTitle }}</strong>
      </div>
      <div style="margin: 0 44px;">{{ warningText }}</div>
    </a-modal>

    <!--  拖拽盒子  -->
    <div
      v-if="draggingMousePosition !== null && didDrag"
      class="dragging"
      :style="{
        top: `${draggingMousePosition.y - 80}px`,
        left: `${draggingMousePosition.x - 185}px`,
        height: `${nodeHeight - 6}px`,
        width: `${nodeWidth - 6}px`,
      }"
    >
      <div class="type-icon">
        <a-icon-font class="type-icon-color" type="iconshujubeifen" />
      </div>
      <div class="dragging-name" :style="{ top: `${nodeHeight - 5}px` }">
        {{ draggingDataItem.name }}
      </div>
    </div>

    <!-- 数据详情    -->
    <node-data-preview
      :current-info="[currentDataInfo]"
      :info-visible="infoDataVisible"
      @close-preview="infoDataVisible = false"
    />

    <!-- 加载数据 -->
    <a-modal
      title="加载数据"
      :visible="loadDataVisible"
      ok-text="确定"
      cancel-text="取消"
      centered
      @ok.stop="dataImport"
      @cancel.stop="cancelDataImport"
    >
      <div class="search-box-cont">
        <a-input
          v-model="keyword"
          placeholder="输入搜索关键字..."
          allow-clear
        />
      </div>
      <div class="number-of-select">
        <span
          >已选{{ checkDataIds }}个文件,已导入{{ loadedIds }}个文件,共{{
            searchMode ? searchDataList.length : allUserDataCount
          }}个文件</span
        >
        <a @click="toDataImport">导入数据</a>
      </div>
      <!--  body  -->
      <div class="description scroll-bar">
        <div v-if="!searchMode">
          <a-tree v-model="checkIds" :tree-data="dealUserDataList" checkable>
          </a-tree>
        </div>
        <div v-if="searchMode">
          <a-tree v-model="checkIds" :tree-data="searchDataList" checkable>
          </a-tree>
        </div>
        <div
          v-if="
            (searchMode && searchDataList.length === 0) ||
            (!searchMode && dealUserDataList.length === 0)
          "
          class="no-result"
        >
          <img alt="" src="@/assets/view/category-empty.svg" />
          <div>暂无数据</div>
          <div>请到数据管理中导入数据</div>
        </div>
      </div>
    </a-modal>
    <!-- 结束引导弹框 -->
    <guide-start-end-modal :type="'end'" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Prop, Watch } from 'vue-property-decorator'
import DataViewStore, { Data } from '@/store/modules/dataview'
import UserStore from '@/store/modules/user'
import {
  queryUserDatalist,
  searchUserDatalist,
  infoData,
  deleteData,
  queryProjectDataset,
  locateDataSource,
} from '@/api/data-list'
import { DataIconBackGround } from '@/components/studio/data/panel/operator-emnu'
import { Modal } from 'ant-design-vue'
import NodeDataPreview from '@/components/studio/data/panel/NodeDataPreview.vue'
import GuideStepPopover from '@/components/user-guide/GuideStepPopover.vue'
import UserGuideStore from '@/store/modules/user-guide'
import GuideStartEndModal from '@/components/user-guide/GuideStartEndModal.vue'

const status = [false, true]

// 数据源组
interface DatasourceGroup {
  userName: string
  collapsed?: boolean
  items: Array<any>
}

@Component({
  components: {
    NodeDataPreview,
    GuideStepPopover,
    GuideStartEndModal,
  },
})
export default class DataList extends Vue {
  // 项目id
  @Prop({
    type: Number,
    default: 0,
  })
  projectId!: number
  // 访问模式
  @Prop({
    type: Boolean,
    default: 0,
  })
  mode!: boolean
  public keyword2 = ''
  // 已加载的数据源搜索模式
  public searchMode2 = false
  // 搜索结果
  public searchResult: Array<any> = []
  // 搜索节流
  public timeout: any = {}
  // 已展开的列表
  public collapsedList: Array<string> = []
  // 当前打开的menu 组group index 和 item index
  public dbGroupIndex: number | null = null
  public dbItemIndex: number | null = null
  // 保存至数据管理 弹窗显示
  public saveToDmVisible: boolean = false
  // 保存至本地 弹窗显示
  public saveToDSVisible: boolean = false
  // 数据管理弹窗 form
  public dataMgtForm: any = {}
  // 新建分类是否显示
  public newClassVisible: boolean = false
  // 提示重复 弹窗显示
  public warningVisible: boolean = false
  // warning modal title
  public warningTitle: string = '“数据集-1”已存在，要替换它吗？' // 当前版本未保存，是否恢复？
  // warning modal text
  public warningText: string =
    '“数据分类1”中已存在同名数据，若替换则会覆盖其当前内容。' // 若恢复，当前版本将被覆盖。

  // 拖拽的数据
  public draggingDataItem: Data | null = null
  // 拖拽位置
  public draggingMousePosition: { x: number; y: number } | null = null
  public didDrag = false
  // 用户数据列表(加载)
  public userDataList: Array<any> = []
  // 数据详情
  public currentDataInfo: any = {}
  // 删除的当前数据
  public currentDeleteData: Data = {
    type: '',
    id: 0,
    name: '无定义',
  }
  // 数据详情弹框显示
  private infoDataVisible: boolean = false
  // 加载数据弹框显示
  public loadDataVisible: boolean = false
  public searchDataList: Array<any> = []
  public keyword: string = ''
  public checkIds: Array<number> = []
  public loadedIds: number = 0 // 已导入的数量
  // 当前打开的menu dataId（系统算子无id 使用group index 和 item index 实现）
  public menuOpenDataId: number | null = null

  private dataIconBackground: string = DataIconBackGround
  private nodeHeight: number = 40
  private nodeWidth: number = 58

  private get activePipelineId() {
    return DataViewStore.getPipelineId
  }

  // 用户名
  private get userName() {
    return UserStore.currentUser ? UserStore.currentUser.name : '未命名用户'
  }

  // 请求 数据列表
  public async created(): Promise<void> {
    await DataViewStore.loadProjectData(this.projectId)
    if (this.projectData?.length === 1) {
      this.collapsedList.push(this.projectData[0]?.userName)
    }
  }

  // 监听 点击清空 当前 数据menu id
  public mounted() {
    document.addEventListener('click', this.menuOpenIdNull)
    this.updateGuideStep(8)
  }

  /**
   * 进入页面初始化 步骤
   */
  public updateGuideStep(step: number) {
    setTimeout(() => {
      if (UserGuideStore.currentStep === 7) {
        UserGuideStore.toSpecifiedGuideStep(step)
      }
    }, 500)
  }

  // 进入下一步 step
  public nextGuideStep(step: number) {
    UserGuideStore.toSpecifiedGuideStep(step)
  }

  /**
   * 修改当前步骤的状态 true 正在进行中
   */
  public setGuideStepOnGoing(type: boolean) {
    UserGuideStore.setCurrentGuideStepInProgress(type)
  }

  /**
   * 加载数据成功
   */
  public loadDataSuccessToNextStep(step: number) {
    // 展开第一个文件夹
    this.collapsedList.push(this.projectData[0]?.userName)
    this.nextGuideStep(step)
  }

  // 已选择的数量
  private get checkDataIds() {
    return this.checkIds.filter(
      (item: number | string) => typeof item === 'number'
    ).length
  }

  /**
   * toggle 折叠
   * @param group
   */
  public toggleGroupStatus(group: DatasourceGroup) {
    if (this.collapsedList.includes(group.userName)) {
      this.collapsedList.splice(this.collapsedList.indexOf(group.userName), 1)
    } else {
      this.collapsedList.push(group.userName)
    }
  }

  // 节点 列表
  private get operatorNodes() {
    return DataViewStore.pipelineNodes
  }

  // 定位数据
  public locateData(datasource: any) {
    locateDataSource({
      data: {
        datasetId: datasource.id,
        projectId: this.projectId,
        pipelineId: this.activePipelineId,
      },
    })?.then((response: any) => {
      if (response.data.code === 100) {
        // console.log(response.data.result)
        if (response.data.result.length > 0) {
          const chooseBoxNodes: any[] = []
          response.data.result.forEach((element: { id: any }) => {
            chooseBoxNodes.push(
              this.operatorNodes.filter((item) => {
                return element === item.id
              })
            )
          })
          DataViewStore.setLocateNodes(chooseBoxNodes.flat(Infinity))
        } else {
          this.$message.error(`${DataViewStore.getTabName}的Pipeline中无该表！`)
        }
      }
    })
    // const chooseBoxNodes = this.operatorNodes.filter((item) => {
    //   return item.data.dataset_id === datasource.id
    // })
    // if (chooseBoxNodes.length === 0) {
    //   this.$message.error(`${DataViewStore.getTabName}的Pipeline中无该表！`)
    // }
    // DataViewStore.setLocateNodes(chooseBoxNodes)
  }

  // 保存数据
  public saveData(data: any) {
    this.dataMgtForm.data = data
    this.LoadData(false)
    this.saveToDmVisible = true
  }

  // 弹窗-新建分类
  public addClass() {
    this.$nextTick(() => {
      const nameInput = this.$refs.classInput as HTMLElement // 使用ref需要用v-show代替v-if
      // @ts-ignore
      setTimeout(function () {
        nameInput?.focus()
      }, 300) // 延迟focus，否则不生效
    })
    this.dataMgtForm.categoryId = undefined
    this.newClassVisible = true
  }

  // 阻止事件传递， 阻止清空group index and item index
  public clickOperatorItem($event: MouseEvent) {
    $event.stopPropagation()
  }

  private get allUserDataCount() {
    return this.userDataList.flatMap((item: any) => item.dataset).length
  }

  public menuOpenIdNull() {
    this.menuOpenDataId = null
  }

  public beforeDestroy() {
    document.removeEventListener('click', this.menuOpenIdNull)
    DataViewStore.setLocateNodes([])
  }

  // 数据列表渲染
  public get projectData(): any {
    return DataViewStore.projectData
  }

  // 编辑菜单当前数据醒目显示
  public visibleChange(data: Data) {
    this.menuOpenDataId = data.id
  }

  // 阻止事件传递， 阻止清空menuOpenDataId
  public clickDataItem($event: MouseEvent) {
    $event.stopPropagation()
  }

  // 加载数据  获取用户所有数据
  public LoadData(visible: boolean) {
    this.setGuideStepOnGoing(true)
    queryUserDatalist({ data: { projectId: this.projectId } })?.then(
      (response: any) => {
        if (response.data.code === 100) {
          this.userDataList = response.data.result
          // console.log('LoadData', this.userDataList)
          this.checkIds = []
          this.loadedIds = 0
          this.loadDataVisible = visible
        }
      }
    )
  }

  // 用户数据渲染
  public get dealUserDataList() {
    const list: Array<any> = []
    this.userDataList.forEach((group: any) => {
      const groupList: Array<any> = []
      if (group.dataset.length > 0) {
        group.dataset.forEach((item: any) => {
          groupList.push({
            title: item.name,
            key: item.id,
            disableCheckbox: item.status === 1 ? status[1] : status[0],
          })
          if (item.status === 1) {
            this.loadedIds += 1
          }
        })
      }
      list.push({
        title: group.categoryName,
        key: String(group.categoryId),
        children: groupList,
      })
    })
    return list
  }

  // 已加载数据源-搜索模式
  @Watch('keyword2')
  private _onKeyword2Changed(keyword: string) {
    if (!keyword) {
      // 重新拿算子列表，（检索收藏变更问题）
      // this.dataSourceSearch(keyword) // 查找数据源方法
      this.collapsedList = []
      this.searchMode2 = false
    }
    // 搜索节流
    this.searchResult = []
    if (this.timeout) {
      clearTimeout(this.timeout)
    }
    this.timeout = setTimeout(() => this.dataSourceSearch(keyword.trim()), 300)
  }

  // 搜索
  public async dataSourceSearch(keyword: string) {
    if (keyword.replace(/^\s+|\s+$/g, '')) {
      // 搜索数据源接口
      const response = await queryProjectDataset({
        data: { projectId: this.projectId, datasetName: keyword },
      })
      this.searchMode2 = true
      response.data.result?.forEach((element: { userName: string }) => {
        if (element.userName === this.userName) {
          element.userName = '我'
        }
      })
      this.searchResult = response.data.result
      this.searchResult.forEach((item: any) => {
        if (!this.collapsedList.includes(item.userName)) {
          this.collapsedList.push(item.userName)
        }
      })
      // console.log('collapsedList',this.collapsedList,this.searchResult)
    }
  }

  // 搜索模式
  public get searchMode() {
    return this.keyword.replace(/^\s+|\s+$/g, '').length > 0
  }

  @Watch('keyword')
  private async _onKeywordChanged(keyword: string) {
    if (keyword.replace(/^\s+|\s+$/g, '')) {
      this.checkIds = []
      const response = await searchUserDatalist({
        data: { content: keyword.trim(), projectId: this.projectId },
      })
      const list: any = []
      response.data.result.forEach((group: any) => {
        group.dataset.forEach((item: any) => {
          list.push({
            title: `${item.name} (${group.categoryName})`,
            key: item.id,
            disableCheckbox: item.status === 1 ? status[1] : status[0],
          })
        })
      })
      this.searchDataList = list
    }
  }

  // 确认加载数据
  public async dataImport(): Promise<void> {
    const checkDataIds = this.checkIds.filter(
      (item: number | string) => typeof item === 'number'
    )
    if (checkDataIds.length === 0) {
      this.$message.warn('请选择数据后确认!')
    } else {
      await DataViewStore.importData({
        checkDataIds,
        projectId: this.projectId,
      })
      this.loadDataVisible = false
      this.loadDataSuccessToNextStep(9)
    }
  }

  /**
   * 取消上传
   */
  public cancelDataImport() {
    this.loadDataVisible = false
    this.setGuideStepOnGoing(false)
  }

  // 查看数据 弹框
  public async checkDataInfo(data: Data) {
    const response = await infoData({
      data: { datasetId: data.id, projectId: this.projectId },
    })
    if (response.data.code === 100) {
      this.currentDataInfo = response.data.result
      this.infoDataVisible = true
    }
  }

  // 删除数据 弹框
  public openDeleteData(data: Data) {
    this.currentDeleteData = data
    Modal.confirm({
      title: '确认要删除该数据表吗？',
      content: `删除数据表：${this.currentDeleteData.name}`,
      centered: true,
      okText: '确定',
      cancelText: '取消',
      onOk: this.deleteData,
    })
  }

  // 确认删除数据  close popup
  public async deleteData(): Promise<void> {
    const response = await deleteData({
      data: {
        datasetIds: [this.currentDeleteData.id],
        projectId: this.projectId,
      },
    })
    if (response && response.data.code === 100) {
      await DataViewStore.loadProjectData(this.projectId)
    } else if (response && response.data.code === 500) {
      this.$message.error(response.data.tips)
    }
  }

  // drag
  public startDragging(event_: MouseEvent, data: Data) {
    this.setGuideStepOnGoing(true)
    if (this.mode) {
      return
    }
    this.draggingMousePosition = { x: event_.pageX, y: event_.pageY }
    this.didDrag = false
    this.draggingDataItem = data
    const mouseMoveHandler = ($event: MouseEvent) => {
      this.didDrag = true
      this.draggingMousePosition = { x: $event.pageX, y: $event.pageY }

      const graphs = document.querySelectorAll('.graph') as NodeListOf<
        HTMLElement
      >
      const rect = graphs[0].getBoundingClientRect()
      const graphPosition = [rect.left, rect.top]
      const graphWidthHeight = [rect.width, rect.height]
      if (
        this.draggingMousePosition.x > graphPosition[0] &&
        this.draggingMousePosition.x < graphPosition[0] + graphWidthHeight[0] &&
        this.draggingMousePosition.y > graphPosition[1] &&
        this.draggingMousePosition.y < graphPosition[1] + graphWidthHeight[1]
      ) {
        this.$emit('drag-position', { node: data, event: $event })
      }
    }
    const mouseUpHandler = ($event: MouseEvent) => {
      if (
        this.draggingDataItem !== null &&
        this.draggingMousePosition !== null
      ) {
        const graphs = document.querySelectorAll('.graph') as NodeListOf<
          HTMLElement
        >
        const rect = graphs[0].getBoundingClientRect()
        const graphPosition = [rect.left, rect.top]
        const graphWidthHeight = [rect.width, rect.height]
        const dragPosition = this.draggingMousePosition
        if (
          dragPosition.x > graphPosition[0] &&
          dragPosition.x < graphPosition[0] + graphWidthHeight[0] &&
          dragPosition.y > graphPosition[1] &&
          dragPosition.y < graphPosition[1] + graphWidthHeight[1]
        ) {
          this.$emit('add-data', {
            dropped: this.draggingDataItem,
            event: $event,
          })
        } else {
          this.setGuideStepOnGoing(false) // 没有正确拖到 pipeline 画布
        }
      }
      this.draggingMousePosition = null
      document.removeEventListener('mousemove', mouseMoveHandler)
      document.removeEventListener('mouseup', mouseUpHandler)
    }
    document.addEventListener('mousemove', mouseMoveHandler)
    document.addEventListener('mouseup', mouseUpHandler)
  }

  // 跳转到数据导入
  public toDataImport() {
    // 保存当前的url
    const parameters: any = {
      url: `/project/${this.$route.params.id}/data`,
      projectId: this.$route.params.id,
      loadType: 'table',
    }
    sessionStorage.setItem('lastUrl', JSON.stringify(parameters))
    const { href } = this.$router.resolve({
      path: '/management/data/import',
    })
    window.location.href = href
  }
}
</script>

<style lang="less" scoped>
@import '@/styles/panelList';

.data-list {
  max-height: 30%;
}

.data-list-co {
  height: 100%;
}

/* 数据详情 ---start */
.container {
  width: 100%;
}

.title {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;

  h1 {
    font-size: 16px;
    font-weight: bold;
  }
}

.infos {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-top: 12px;

  span {
    margin-right: 20px;
  }
}

.data-table {
  margin-top: 30px;
}

/* 数据详情 ---end */
/* 数据列表 */
.items {
  max-height: calc(100% - 32px);
  overflow-y: auto;
}

.number-of-select {
  align-items: center;
  color: #222432;
  display: flex;
  font-size: 12px;
  font-weight: 400;
  height: 32px;
  justify-content: space-between;
  letter-spacing: 1px;
  line-height: 17px;
  margin-top: 10px;
}

/deep/ .ant-tree-treenode-switcher-open,
/deep/ .ant-tree-treenode-switcher-close {
  position: relative;

  .ant-tree-checkbox {
    &::before {
      content: ' ';
      display: block;
      height: 32px;
      left: 0;
      position: absolute;
      top: 0;
      width: 1200px;
    }
  }
}

.description {
  height: 200px;
  overflow-y: auto;
}

.saveToDM-modal {
  .m-span {
    cursor: pointer;

    &:hover {
      color: #6973ff;
    }

    .icon {
      margin-right: 5px;
    }
  }

  .disabled {
    color: rgba(0, 0, 0, 0.2);
    cursor: not-allowed;

    &:hover {
      color: rgba(0, 0, 0, 0.2);
    }
  }

  .delete {
    cursor: pointer;
    margin-left: 10px;

    &:hover {
      color: #6973ff;
    }
  }
}

.warning-modal {
  align-items: center;
  display: flex;
  margin-bottom: 20px;
  padding: 8px;

  .icon {
    font-size: 24px;
  }

  b {
    font-size: 16px;
    margin-left: 14px;
  }
}

.data-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
